<template>
  <div class="layout">
    <el-form ref="formRef" :model="form" label-width="96px" class="searchForm" :inline="true">
      <!-- 搜索 -->
      <el-form-item :label="formItem[type].label">
        <el-input v-model="form.keyword" class="search_item" placeholder="请输入标题进行查找" style="width: 200px" clearable></el-input>
      </el-form-item>
      <!-- 选择部门人员 -->
      <el-form-item :label="formItem[type].derpartLabel">
        <el-select v-model="form.user_id" placeholder="全部" multiple @click="openDepart" popper-class="zw-hide_select_option">
          <el-option v-for="item in creators" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
        </el-select>
      </el-form-item>
      <!-- 上传时间 -->
      <el-form-item :label="formItem[type].timeLabel" class="selectTime">
        <div class="picker_time">
          <el-date-picker v-model="form.start_time"   type="datetime" placeholder="开始时间" style="width: 100%" :disabled-date="beginDateBefore"></el-date-picker>
        </div>
        <div class="text-center"></div>
        <div class="picker_time">
          <el-date-picker v-model="form.end_time" type="datetime" placeholder="结束时间" style="width: 100%" :disabled-date="beginDateAfter"></el-date-picker>
        </div>
      </el-form-item>
      <template v-if="[2, 4, 5].includes(type)">
        <el-form-item :label="`${labelName[type]}类型`">
          <el-select class="search_item" v-model="form.type" placeholder="全部类型" @change="demo">
            <el-option v-for="item in typeDiff(type)" :key="item.value" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </template>
      <!-- 标签筛选 -->
      <template v-if="type != 8">
        <el-form-item label="标签筛选">
          <el-select v-model="form.tag_list" placeholder="请选择标签" multiple @click="selecTag" @change="changeTag">
            <el-option v-for="item in AllTags" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
          </el-select>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button type="primary" @click="submitForm(formRef)">查询</el-button>
        <el-button @click="resetForm(formRef)">清空</el-button>
      </el-form-item>
    </el-form>
    <!-- 部门人员弹框 -->
    <ZWDepart ref="DepartRef" />
    <!-- 标签弹框 -->
    <ZWSelectTag ref="searchSelectRef" @submit="getTags" />
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, watch } from 'vue'
  import type { ElForm } from 'element-plus'

  type FormInstance = InstanceType<typeof ElForm>
  import { DFormat } from '@/utils/utils'
  import ZWDepart from '@/components/ZWDepart.vue'
  import ZWSelectTag from '@/components/ZWSelectTag.vue'
  import { getSetionId } from '@/utils/utils'
  const searchSelectRef = ref(null)

  const emit = defineEmits(['submit'])

  import { useStore } from '@/store'
  const store = useStore()

  const selecDialogRef = ref(null)
  const formRef = ref<FormInstance>()
  const demo = (data: any) => {
    console.log(data)
  }
  const tags = ref([])
  const users = ref([])
  // 选择标签options
  const AllTags = ref([])
  // 创建人options
  const creators = ref([])
  // 1-文本 2-图片 3-音频 4-视频 5-文件 6-链接文章 7-链接引用
  const type = computed(() => {
    return store.getters['content/type']
  })

  const departInfo = computed(() => {
    return store.getters['content/depart']
  })

  const labelName = reactive(['', '', '图片', '', '视频', '文件', '链接'])
  const typeDiff = (type: number) => {
    return [
      { value: '-1', name: `全部类型` },
      { value: '0', name: `普通${labelName[type]}` },
      {
        value: '1',
        name: `雷达${labelName[type]}`
      }
    ]
  }
  // 标签
  const formItem = reactive([
    {},
    {
      label: '文本搜索',
      derpartLabel: '创建人',
      timeLabel: '添加时间'
    },
    {
      label: '图片搜索',
      derpartLabel: '上传者',
      timeLabel: '上传时间'
    },
    {
      label: '音频搜索',
      derpartLabel: '上传者',
      timeLabel: '添加时间'
    },
    {
      label: '视频搜索',
      derpartLabel: '上传者',
      timeLabel: '添加时间'
    },
    {
      label: '文件搜索',
      derpartLabel: '上传者',
      timeLabel: '添加时间'
    },
    {
      label: '链接搜索',
      derpartLabel: '创建者',
      timeLabel: '创建时间'
    },
    {
      label: '搜索内容',
      derpartLabel: '创建者',
      timeLabel: '添加时间'
    }
  ])
  const form = reactive({
    keyword: '',
    user_id: users,
    start_time: '',
    end_time: '',
    tag_list: []
  })

  const beginDateBefore = (item: any) => {
    let beginDate: string = form.end_time
    if (beginDate) {
      return Date.parse(item) > Date.parse(beginDate)
    }
  }
  const beginDateAfter = (item: any) => {
    let beginDate: string = form.start_time
    if (beginDate) {
      return Date.parse(item) < Date.parse(beginDate)
    }
  }

  //打开新建选择人
  const openDepart = () => {
    store.dispatch('content/depart', {
      creaters: creators,
      departVisble: true
    })
  }
  // 打开选择标签
  const selecTag = () => {
    searchSelectRef.value.showCreatTag = true
    searchSelectRef.value.appDialog.visible = true
    searchSelectRef.value.selectTags = AllTags.value
  }
  // 获取标签
  const getTags = (data: any) => {
    AllTags.value = data
    form.tag_list = getSetionId('id', data)
  }
  //
  const changeTag = (data: any) => {
    let arr: any[] = AllTags.value.filter((item: any) => data.includes(item.id))
    form.tag_list = getSetionId('id', arr)
    AllTags.value = arr
  }
  // 提交查询
  const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
      if (!valid) return
      form.start_time = form.start_time ? DFormat(Date.parse(form.start_time), 'yyyy-MM-dd hh:mm:ss') : ''
      form.end_time = form.end_time ? DFormat(Date.parse(form.end_time), 'yyyy-MM-dd hh:mm:ss') : ''
      emit('submit', form)
    })
  }
  //重置
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    form.keyword = ''
    form.user_id = []
    form.start_time = ''
    form.end_time = ''
    form.tag_list = []
    emit('submit', form)
  }

  // 部门人员信息
  watch(departInfo, (depart) => {
    console.log(depart, '====depart')
    creators.value = depart.creaters
    users.value = getSetionId('id', depart.creaters)
  })
</script>

<style lang="scss" scoped>
  .layout {
    padding: 9px 20px 9px 12px;
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    .searchForm {
      // display: flex;
      position: relative;
      .search_item {
        max-width: 180px;
        margin-bottom: 0;
      }
      :deep .el-form-item {
        margin: 5px;
      }
      .picker_time {
        min-width: 110px;
      }
      .selectTime {
        :deep .el-form-item__content {
          display: flex;
          align-items: center;
          .text-center {
            min-width: 14px;
            margin: 0 13px;
            border-top: 1px solid #969696;
          }
        }
      }
      .search_btn {
        position: absolute;
        top: 5px;
        right: 0;
      }
    }
  }
</style>
